<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {updateOrderStatus,getOrderByPage} from "@/api/order.js"
import {getOrderDetailById} from "@/api/orderDetail.js";

const pageSelect = ref({
  page: 1,
  pageSize: 10,
  status:'',
  total: 0,
});
//状态
const statusOptions = {
  '0': '未支付',
  '1': '未接单',
  '2': '待发货',
  '3': '已发货',
  '4': '已完成',
  '5': '已取消',
}
const selectStatus = (status) => {
  pageSelect.value.status=status;
  pageSelect.value.page = 1;
  getOrders();
}
const receiveOrder = (order) => {
  ElMessageBox.confirm(
      `确定要接单吗？`,
      "警告",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(async () => {
        await updateOrderStatus(order.orderId, 2)
        ElMessage.success("接单成功")
        await getOrders()
      })
      .catch(() => {
        ElMessage.info("已取消接单")
      });
}
const sentOrder = (order) => {
  ElMessageBox.confirm(
      `确定要发货吗？`,
      "警告",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(async () => {
        await updateOrderStatus(order.orderId, 3)
        ElMessage.success("发货成功")
        await getOrders()
      })
      .catch(() => {
        ElMessage.info("已取消发货")
      });
}
const completeOrder = (order) => {
  ElMessageBox.confirm(
      `确定要完成订单吗？`,
      "警告",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(async () => {
        await updateOrderStatus(order.orderId, 4)
        ElMessage.success("订单已完成")
        await getOrders()
      })
      .catch(() => {
        ElMessage.info("已取消完成订单")
      });
}

// 获得订单列表数据
const ordersList = ref([])
const getOrders = async () => {
  const res = await getOrderByPage(pageSelect.value)
  ordersList.value = res.data.orders;
  pageSelect.value.total = res.data.total;
}

// 分页
const handleSizeChange = (newSize) => {
  pageSelect.value.pageSize = newSize;
  pageSelect.value.page = 1;
  getOrders();
};
const handleCurrentChange = (newPage) => {
  pageSelect.value.page = newPage;
  getOrders();
};


//获取订单的详情
const detailVisible = ref(false)
const orderDetailList = ref([])
const orderValue = ref({})
const getOrderDetail = async (orderId) => {
  const res = await getOrderDetailById(orderId)
  orderDetailList.value = res.data
}
const viewDetail = (order) => {
  detailVisible.value = true
  orderValue.value = order
  getOrderDetail(order.orderId)
  console.log(detailVisible.value)
}

getOrders()
</script>

<template>
<div class="order-container">
  <h1 class="title">🌺 订单管理列表</h1>
  
  <!-- 状态按钮 -->
  <div class="status-buttons">
    <el-button
        v-for="(label, value) in statusOptions"
        :key="value"
        :type="selectedStatus === value ? 'primary' : 'default'"
        @click="selectStatus(value)"
        size="small"
        round
        class="status-btn"
    >
      {{ label }}
    </el-button>
    <el-button
        type="info"
        size="small"
        @click="selectStatus('')"
        plain
        round
        class="status-btn"
    >
      全部
    </el-button>
  </div>
  
  <!-- 表格卡片 -->
  <el-card class="order-card" shadow="hover">
    <table class="custom-table">
      <thead>
        <tr>
          <th>订单ID</th>
          <th>用户ID</th>
          <th>订单时间</th>
          <th>订单金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in ordersList" :key="order.orderId">
          <td>{{ order.orderId }}</td>
          <td>{{ order.userId }}</td>
          <td>{{ order.orderDate }}</td>
          <td>{{ order.totalAmount }}</td>
          <td>
            <el-button type="primary" size="small" @click="viewDetail(order)" round plain>查看详情</el-button>
            <el-button type="danger" size="small" @click="receiveOrder(order)" round v-if="order.status==1">接单
            </el-button>
            <el-button type="warning" size="small" @click="sentOrder(order)" round v-else-if="order.status==2">发货
            </el-button>
            <el-button type="success" size="small" @click="completeOrder(order)" round v-else-if="order.status==3">
              完成
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      style="margin-left: 120px; margin-top: 20px"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageSelect.total"
      :current-page="pageSelect.page"
      :page-size="pageSelect.pageSize"
      :page-sizes="[10, 20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination-bar"
  />
  </el-card>
  
  

</div>

<!-- 弹窗 -->
<el-dialog
    title="订单详情"
    :model-value="detailVisible"
    @update:model-value="val => detailVisible = val"
    width="50%"
    @close="closeDetail"
    class="custom-dialog"
>
  <!-- 订单基本信息 -->
  <div class="order-info">
    <p><strong>订单 ID：</strong>{{ orderValue.orderId }}</p>
    <p><strong>用户 ID：</strong>{{ orderValue.userId }}</p>
    <p><strong>订单时间：</strong>{{ orderValue.orderDate }}</p>
    <p><strong>订单金额：</strong>{{ orderValue.totalAmount }}</p>
  </div>
  
  <!-- 订单详情表格 -->
  <el-table :data="orderDetailList" border stripe style="margin-top: 20px">
    <el-table-column prop="flowerName" label="商品名称" align="center"/>
    <el-table-column prop="quantity" label="数量" align="center"/>
    <el-table-column prop="price" label="单价" align="center"/>
    <el-table-column label="总价" align="center">
      <template #default="scope">
        ￥{{ (scope.row.quantity * scope.row.price).toFixed(2) }}
      </template>
    </el-table-column>
  </el-table>

</el-dialog>


</template>

<style scoped>
.order-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  min-height: 1000px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.status-buttons {
  margin-bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.status-btn {
  transition: all 0.3s ease;
}

.status-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.order-card {
  width: 950px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #ffffff;
  padding: 20px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

.custom-table th {
  background-color: #f9fafb;
  font-weight: bold;
  color: #333;
  padding: 12px;
  border: 1px solid #ebeef5;
}

.custom-table td {
  padding: 10px;
  border: 1px solid #ebeef5;
}

.el-button {
  margin: 0 5px;
  font-weight: 500;
}

.order-info {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
}

</style>
